<template>
  <div>
    <!-- 用户头像 -->
    <div class="bgc_gray">
      <van-cell-group>
        <van-cell>
          <template slot="title">
            <van-image
              class="avatar"
              round
              :src="this.user.face || 'https://img01.yzcdn.cn/vant/cat.jpeg'"
            />
            <span class="username">{{ this.user.nickname }}</span>
          </template>
        </van-cell>
      </van-cell-group>
    </div>
    <!-- 支付面板 -->
    <van-cell-group class="payment">
      <van-cell>
        <template slot="title">
          VIP月卡<br />
          <span> 一个月可观看所有内容</span>
        </template>
        <template slot="extra"> ￥ 0.01</template>
      </van-cell>

      <van-cell>
        <template slot="title">
          VIP季卡<br />
          <span> 三个月可观看所有内容</span>
        </template>
        <template slot="extra"> ￥ 0.68</template>
      </van-cell>
    </van-cell-group>
    <div class="bottom">
      <span>{{ price }}</span>
    </div>
    <van-divider
      :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
    >
      文字
    </van-divider>
  </div>
</template>

<script>
import { buyVip } from '@/api'
export default {
  data() {
    return {
      user: '',
      price: '￥0.0' + '元 限时购买',
    }
  },
  created() {
    this.getList1()
  },
  mounted() {},
  methods: {
    async getList1() {
      try {
        const { data: res } = await buyVip({ uid: this.$store.state.uid })
        console.log(res, 'vip')
        this.user = res.data
      } catch (err) {
        console.log(err)
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.avatar {
  width: 60px;
  height: 60px;
  vertical-align: middle;
  margin-right: 20px;
}
.bottom {
  background-color: #04b9fe;
  position: absolute;
  height: 50px;
  width: 100%;
  bottom: 0%;
  left: 0;
  text-align: center;
  line-height: 50px;
  color: #fff;
  font-size: 20px;
  font-weight: 500;
}
</style>
